<template>
  <div class="page-wrapper">
    <div class="search_content">
      <div>
        <el-select v-model="selectedType" placeholder="请选择类型" filterable clearable
          style="width: 200px; margin-left: 5px">
          <el-option label="GEN" value="GEN"></el-option>
          <el-option label="DR8" value="DR8"></el-option>
        </el-select>
      </div>

      <div v-if="selectedType === 'GEN'">
        <div style="margin-bottom: 10px;">
          <el-select v-model="docNo1" placeholder="请选择工单号" filterable clearable style="width:200px;margin-left: 5px">
            <el-option v-for="item in GENDocNoList" :key="item.id" :label="item.docNo" :value="item.docNo"
              @click.native="getGENData()">
            </el-option>
          </el-select>
          <el-button type="primary" style="margin-left: 5px;height: 30px" @click="getGENData()">GEN查询</el-button>
        </div>
      </div>

      <div v-if="selectedType === 'DR8'">
        <div style="margin-bottom: 10px;">
          <el-select v-model="docNo2" placeholder="请选择工单号" filterable clearable style="width:200px;margin-left: 5px">
            <el-option v-for="item in DR8DocNoList" :key="item.id" :label="item.docNo" :value="item.docNo"
              @click.native="getDR8Data()">
            </el-option>
          </el-select>
          <el-button type="primary" style="margin-left: 5px;height: 30px;width: 100px;" @click="getDR8Data()">DR8查询</el-button>
        </div>
      </div>


    </div>

    <!-- 内容 -->
    <div :style="{ width: '100%', height: '91%', overflowY: 'auto', background: 'white', marginTop: '10px' }">
      <measureDR8 class="avue_self" v-if="selectedType === 'DR8'" ref="dr8" :doc-no="docNo" />
      <div v-if="selectedType === 'DR8'" :style="{ width: '100%', height: '1px', background: '#ccc' }"></div>
      <measureGEN class="avue_self" v-if="selectedType === 'GEN'" ref="gen" :doc-no="docNo" />
      <div v-if="selectedType === 'GEN'" :style="{ width: '100%', height: '1px', background: '#ccc' }"></div>
    </div>
  </div>
</template>

<script>
import measureDR8 from '@/views/workorder/measuredr8/alone'
import measureGEN from '@/views/workorder/measuregen/alone'
import { getDocNoListByType } from "@/api/workorder/workordercps"


export default {
  name: 'DR8-Summary',
  components: {
    measureDR8,
    measureGEN
  },
  data() {
    return {
      docNo: null, // 工单号用于查询
      docNo1: null, // GEN工单号选择框绑定的值
      docNo2: null, // DR8工单号选择框绑定的值
      docNoList: [],
      selectedType: 'GEN', // 默认展示GEN选择
      GENDocNoList: [],
      DR8DocNoList: []
    }
  },
  created() {
    this.getDocNoDR8ListData()
    this.getDocNoGENListData()
  },
  mounted() {
    const avueViewDiv = document.getElementById('avue-view')
    if (avueViewDiv) {
      avueViewDiv.style.overflow = 'hidden'
    }
  },

  methods: {
    getDocNoDR8ListData() {
      getDocNoListByType("DR8").then(response => {
        this.DR8DocNoList = response.data.data
      })
    },
    getDocNoGENListData() {
      getDocNoListByType("GEN").then(response => {
        this.GENDocNoList = response.data.data
      })
    },
    getGENData() {
      if (this.validatenull(this.docNo1)) {
        this.$message.error('请输入GEN工单!')
        return
      }
      this.docNo = this.docNo1
      this.$nextTick(() => {
        this.$refs.gen.searchChange()
      })
    },
    getDR8Data() {
      if (this.validatenull(this.docNo2)) {
        this.$message.error('请输入DR8工单!')
        return
      }
      this.docNo = this.docNo2
      this.$nextTick(() => {
        this.$refs.dr8.searchChange()
      })
    },
    getData() {
      // 这里的getData方法可以根据需要保留或删除，因为点击选择框的点击事件已经触发对应查询
      // 如果保留，可在选择类型后直接触发查询（即使未点击选择框内的具体工单号）
      if (this.validatenull(this.docNo)) {
        this.$message.error('请输入工单!')
        return
      }
      this.$nextTick(() => {
        if (this.selectedType === 'DR8') {
          this.$refs.dr8.searchChange()
        } else {
          this.$refs.gen.searchChange()
        }
      })
    },
    validatenull(val) {
      return val === null || val === undefined || val === ""
    }
  }
}
</script>
<style lang="scss" scoped>
.page-wrapper {
  width: 98.6%;
  height: 100%;
  /* background: #fff; */
  box-sizing: border-box;
  margin: 0 10px;
}

.search_content {
  display: flex;
  background: #fff;
  padding: 10px;

}
.avue_self {
  ::v-deep .basic-container {
    background: #fff;
    padding: 0;
  }
}
</style>
